<template>
  <div v-loading="pageLoading" class="game_page">
    <!-- 标题 -->
    <div class="confirmInfo_title gl_clear">培训报名</div>
    <div>
      <!-- 步骤条 -->
      <el-steps class="step_mb" :active="stepActive">
        <el-step v-for="(item, index) in stepList" :key="index" :title="item.title" :description="item.description" />
      </el-steps>

      <div>
        <component
          :is="item.component"
          v-for="(item, index) in stepList"
          v-show="stepActive === index"
          :ref="'entry-' + item.component"
          :key="index"
          :dict="dict"
          :required-id-data="requiredIdData"
          :user-data="userInfo"
          :train-info="trainInfo"
          :is-show="stepActive === index"
          :transfer-data="transferData"
          @onSetTransferData="onSetTransferData"
          @onSetUserInfo="onSetUserInfo"
          @onPrevStep="doPrevStep"
          @onNextStep="doNextStep"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

import StepByNotice from './enter/stepByNotice';
import StepByInfo from './enter/stepByInfo';
import StepByTrain from './enter/stepByTrain';
import StepByExam from './enter/stepByExam';
import StepByHotel from './enter/stepByHotel';
import StepByRenew from './enter/stepByRenew';
import StepByFee from './enter/stepByFee';

import {
  api_GET_EventsManagementRegisterId // 获取注册信息
} from '@/extend/api/gameswaggerApi/app';

export default {
  components: {
    StepByNotice,
    StepByInfo,
    StepByTrain,
    StepByExam,
    StepByHotel,
    StepByRenew,
    StepByFee
  },
  props: {
    trainInfo: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data () {
    return {
      pageLoading: true,
      stepActive: 0, // 当前步骤位置
      stepList: [ // 步骤条数据
        {
          title: '报名须知',
          description: '',
          component: 'step-by-notice'
        },
        {
          title: '个人信息完善',
          description: '',
          component: 'step-by-info'
        },
        {
          title: '培训信息完善',
          description: '',
          component: 'step-by-train'
        },
        {
          title: '培训考试选择',
          description: '',
          component: 'step-by-exam'
        },
        {
          title: '报名缴费',
          description: '',
          component: 'step-by-fee'
        }
      ],
      dynamicStep: { // 动态步骤菜单
        hotel: {
          title: '食宿选择',
          description: '',
          component: 'step-by-hotel'
        },
        fee: {
          title: '会员续费',
          description: '',
          component: 'step-by-renew'
        }
      },
      userInfo: {},
      transferData: {},
      requiredIdData: { // 必须的ID数据
        registerId: ''
      }
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict,
      vxCurrentUserType: state => state.user.currentUserType
    }),
    stepMaxLen () { // 步骤条最大值
      return this.stepList.length - 1;
    },
    // 合并数据，方便监听
    mergeTrainInfoAndCurrentUserType () {
      return {
        vxCurrentUserType: this.vxCurrentUserType,
        trainInfo: this.trainInfo
      };
    }
  },
  watch: {
    // 根据培训信息判断是否需要酒店与会员费步骤
    trainInfo: {
      immediate: true,
      deep: true,
      handler (val) {
        if (val.id) {
          if (val.setting && val.setting.includeHotel) {
            this.stepList.splice(4, 0, this.dynamicStep.hotel);
          }
          if (val.setting && val.setting.includeMembershipFees) {
            if (val.setting.includeHotel) {
              this.stepList.splice(5, 0, this.dynamicStep.fee);
            } else {
              this.stepList.splice(4, 0, this.dynamicStep.fee);
            }
          }
        }
      }
    },
    // 合并培训信息与用户数据
    mergeTrainInfoAndCurrentUserType: {
      deep: true,
      immediate: true,
      handler (val) {
        const _hasUserType = val.vxCurrentUserType && val.vxCurrentUserType.userType;
        const _trainId = val.trainInfo.id;
        if (_trainId && _hasUserType) {
          console.log('mergeTrainInfoAndCurrentUserType', val);
          this.pageLoading = false;
          const _userId = val.vxCurrentUserType && val.vxCurrentUserType.registerId;
          // 有userId 获取用户信息，没有则需要创建
          if (_userId) {
            this.requiredIdData.registerId = _userId;
            this.getUserInfo();
          } else {
            console.log('CurrentUserType 中 registerId 不存在', val.vxCurrentUserType);
          }
        }
      }
    }
  },
  created () {
    this.getDict();
    this.getDictByType(['district']);
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict', getDictByType: 'dict/getDictByType' }),
    // 获取用户信息
    getUserInfo() {
      // 获取个人注册信息
      const _qo = { IncludeDelegation: true };
      const _registerId = this.vxCurrentUserType.registerId;
      api_GET_EventsManagementRegisterId(_registerId, _qo)
        .then(res => {
          this.userInfo = res;
          console.log('getUserInfo -> userInfo', res);
        })
        .catch(
          error => {
            console.log('getUserInfo -> error: 获取用户信息失败', error);
            this.$message({ type: 'error', message: '获取用户信息失败' });
          }
        );
    },
    onSetUserInfo (data) {
      console.log('onSetUserInfo 执行');
      this.userInfo = data;
    },
    onSetTransferData (key, value) {
      this.transferData[key] = value;
    },
    // 执行上一步
    doPrevStep () {
      if (this.stepActive <= 0) {
        return false;
      }
      this.stepActive--;
      return true;
    },
    // 执行下一步
    doNextStep () {
      if (this.stepActive >= this.stepMaxLen) {
        return false;
      }
      this.stepActive++;
      return true;
    }
  }
};
</script>

<style>
  .step_btn {
    padding-top: 48px;
  }

  .step_btn .el-button{
    border-radius: 8px;
  }
  .step_btn .el-button + .el-button {
    margin-left: 24px;
  }

  .box_wrap {
    padding: 30px 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0px 10px 36px 0px rgba(0, 0, 0, 0.08);
  }
  .box_wrap_title {
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    color: #353434;
    margin-bottom: 20px;
  }
</style>

<style lang="scss" scoped>
  .game_page {
    position: relative;
    min-height: 572px;
    padding: 20px 60px;
  }
  .confirmInfo_title {
    position: relative;
    height: 32px;
    margin-bottom: 24px;
    line-height: 32px;
    font-size: 18px;
    font-weight: bold;
    color: #353434;
  }
  .confirmInfo_title::after {
    display: block;
    content: "";
    position: absolute;
    left: -18px;
    top: 0;
    width: 6px;
    height: 32px;
    border-radius: 4px;
    background-color: #E02020;
  }
  .step_mb {
    margin-bottom: 38px;
  }
</style>
